<template>
  <div
    class="changeSkin-gear"
    @click.stop="isShowSkinMenuFun"
    style="background: none; visibility: visible; bottom: 0px"
  >
    <div class="keys"
      ><span id="open-skinMenu">
        &nbsp;<i class="fa fa-cog inline-block rotating"></i> </span
    ></div>
  </div>
  <div class="skin-menu" :class="{ show: isShowSkinMenu }">
    <div class="theme-controls row-container">
      <ul class="menu-list">
        <li id="sakura-bg" @click="changeTheme($event)"
          ><i class="fa fa-snowflake-o"></i
        ></li>
        <li id="gribs-bg" @click="changeTheme($event)"
          ><i class="fa fa-slack" aria-hidden="true"></i
        ></li>
        <li id="KAdots-bg" @click="changeTheme($event)"
          ><i class="fa fa-smile-o"></i
        ></li>
        <li id="totem-bg" @click="changeTheme($event)"
          ><i class="fa fa-optin-monster" aria-hidden="true"></i
        ></li>
        <li id="pixiv-bg" @click="changeTheme($event)"
          ><i class="fa fa-star"></i
        ></li>
        <li id="bing-bg" @click="changeTheme($event)"
          ><i class="fa fa-soundcloud"></i
        ></li>
        <li id="white-bg" @click="changeTheme($event)"
          ><i class="fa fa-sun-o" aria-hidden="true"></i
        ></li>
        <li id="dark-bg" @click="changeTheme($event)"
          ><i class="fa fa-moon-o" aria-hidden="true"></i
        ></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { choiceTheme } from '@/utils/webutils'

  const isShowSkinMenu = ref(false)

  const isShowSkinMenuFun = () => {
    isShowSkinMenu.value = !isShowSkinMenu.value
  }

  const changeTheme = (event) => {
    choiceTheme(event)
  }
</script>

<style lang="scss" scoped>
  .changeSkin-gear {
    color: var(--font-color);
  }
</style>
